<template>
  <!-- 榜单页面的一条歌曲 -->
  <view class="item-box">
    <view class="icon-text">
      <text class="iconfont icon-bofang"></text>
      <text style="font-size: 32rpx;margin-right: 14rpx;">播放全部</text>
      <text style="font-size: 24rpx; color: #A7A7A7;">(共100首)</text>
    </view>
    <songItem :songList='songTracks'></songItem>
  </view>
</template>

<script>
  import songItem from '../common-song-item/common-song-item.vue'
  export default {
    name:"common-rank-item",
    components:{songItem},
    props:['songTracks'],
    data() {
      return {

      };
    }
  }
</script>

<style scoped>
  .item-box{
    position: relative;
    top: -44rpx;
    box-sizing: border-box;
    width: 100%;
    padding: 34rpx;
    background-color: #FFFFFF;
    border-radius: 24px;
  }
  .icon-text{
    display: flex;
    align-items: center;
  }
  .icon-text .icon-bofang{
    font-size: 42rpx;
    margin-right: 20rpx;
  }
  
</style>
